<template>
  <div class="mui-content">
    <ul class="mui-table-view mui-grid-view mui-grid-12">
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <router-link :to="{name:'detail',params:{bs: 'gszc'}}">
          <!--<span class="mui-icon mui-icon-home"></span>-->
          <img src="static/img/12.png" alt="">
          <div class="mui-media-body">公司注册</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <router-link :to="{name:'detail',params:{bs: 'sbzc'}}">
          <img src="static/img/13.png" alt="">
          <div class="mui-media-body">商标注册</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <router-link :to="{name:'detail',params:{bs: 'dljz'}}">
          <img src="static/img/14.png" alt="">
          <div class="mui-media-body">代理记账</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <router-link :to="{name:'detail',params:{bs: 'gqzr'}}">
          <img src="static/img/15.png" alt="">
          <div class="mui-media-body">股权转让</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <router-link :to="{name:'detail',params:{bs: 'sbdb'}}">
          <img src="static/img/16.png" alt="">
          <div class="mui-media-body">商标答辩</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <router-link :to="{name:'detail',params:{bs: 'tmzr'}}">
          <img src="static/img/17.png" alt="">
          <div class="mui-media-body">天猫转让</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <router-link :to="{name:'detail',params:{bs: 'rjkf'}}">
          <img src="static/img/18.png" alt="">
          <div class="mui-media-body">软件开发</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <a @click="addStatus">
          <img src="static/img/19.png" alt="">
          <div class="mui-media-body">全部分类</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  import { UPDATE_TABBAR } from "../../../store/mutation-types";
  export default {
    name: "Menu",
    methods: {
      addStatus(){
        this.$store.commit(UPDATE_TABBAR,'category');
        this.$router.push('/category');
      }
    }
  }
</script>

<style lang="less" scoped>
  .mui-table-view li,
  .mui-table-view a,
  .mui-table-view:first-child {
    margin: 0 !important;
    padding: 0 !important;
  }

  .mui-content {
    background-color: #fff !important;
  }

  .mui-content .mui-table-view {
    padding: 20px 0 0 !important;
  }

  .mui-content .mui-table-view .mui-table-view-cell {
    margin-bottom: 12px !important;
  }

  .mui-content img {
    width: 0.94rem;
  }

  .mui-content .mui-media-body {
    height: 0.33rem !important;
    line-height: 0.33rem !important;
    font-size: 0.24rem !important;
    color: #8B8B8B !important;
  }

  .mui-table-view:before, .mui-table-view:after {
    height: 0;
  }
</style>
